<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>无缝滚动</title>
  <style>
     * {margin:0;padding:0;}
	 #div1{width:712px;height:129px;background:red;margin:100px auto;position:relative;overflow:hidden;}
	 #div1 ul{position:absolute;left:0;top:0;}
	 #div1 ul li{float:left;width:178px;height:129px;list-style:none;}
  </style>
   <script>
      window.onload=function(){
	     var oDiv=document.getElementById("div1");
		 var oUl=oDiv.getElementsByTagName("ul")[0];
		 var aLi=oUl.getElementsByTagName("li");
		 var speed=2;
		 oUl.innerHTML+=oUl.innerHTML;
		 oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
		 function move(){
		    if(oUl.offsetLeft<-oUl.offsetWidth/2){
			   oUl.style.left="0";
			}
            if(oUl.offsetLeft>0){
			   oUl.style.left=-oUl.offsetWidth/2+'px';
			}			
		    oUl.style.left=oUl.offsetLeft+speed+"px";		   
		 }
		 var timer=setInterval(move,30);
		  oDiv.onmouseover=function(){
		     clearInterval(timer);
		  };
		  oDiv.onmouseout=function(){
		     timer=setInterval(move,30);
		  };
		  document.getElementsByTagName("a")[0].onclick=function(){
		    speed=-2;
		  }
	      document.getElementsByTagName("a")[1].onclick=function(){
		    speed=2;
		  }
	  };
     
   </script>
</head>
<body>
    <a href="javascript:;">向左走</a>
	<a href="javascript:;">向右走</a>
   <div id="div1">
      <ul>
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>	
        <li><img src="images/3.jpg"></li>	
        <li><img src="images/4.jpg"></li>			
      </ul>
   </div>
</body>
</html>